<template>
    <div class="content-container" direction="vertical">
        <div>
            <el-container class="content-row">               
                <div class="input-tip">用户状态：</div>
                <div class="input-field">
                    <el-select v-model="queryParams.state" placeholder="请选择">
                      <el-option key="1" label="待审核" value="1"></el-option>
                      <el-option key="2" label="通过" value="2"></el-option>
                    </el-select>
                </div>
                <div class="input-tip">用户信息：</div>
                <div class="input-field">
                    <el-input v-model="queryParams.people" placeholder="请输入用户信息"></el-input>
                </div>             
            </el-container>

            <el-container class="content-row">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="primary" @click="clear">清空搜索条件</el-button>
            </el-container>
        </div>

        <div>
            <el-table :data="managerReqList" 
            tooltip-effect="dark" 
            style="width:100%"  
            :header-cell-style="{'text-align':'center'}"  
            :cell-style="{'text-align':'center'}"
            stripe>
              <el-table-column label="用户信息" width="300" prop="people"></el-table-column>              
              <el-table-column label="状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.state ? 'success' : ''">{{scope.row.state ? '通过' : '待审核'}}</el-tag>
                </template>
              </el-table-column>              
              <el-table-column label="更新时间" width="200" prop="time"></el-table-column>
              <el-table-column label="添加时间" width="200" prop="addTime"></el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button :type="scope.row.state ? 'danger' : 'success'" @click="operate(scope.row)">
                        {{scope.row.state ? '驳回' : '通过'}}
                    </el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import Mock from '../../mock/Mock'
export default {
    data() {
        return {
            queryParams: {
                people: '',
                state: ''
            },
            managerReqList: []
        }
    },
    mounted() {
        this.managerReqList = Mock.getManagerReqList()
    },
    methods: {
        search() {
            this.$message({
                type: 'success',
                message: '请求参数：' + JSON.stringify(this.queryParams)
            })
            this.managerReqList = Mock.getManagerReqList()
        },
        clear() {
            this.queryParams = {
                people: '',
                state: ''
            },
            this.managerReqList = Mock.getManagerReqList()
        },
         operate(item) {
            item.state = !item.state;
        },
    }
}
</script>